import * as echarts from 'echarts'
import { useEffect, useRef } from 'react';

const BarChart = ({ title }) => {
  const chartRef = useRef(null)
  useEffect(() => {
    // 获取渲染图表的dom节点
    var chartDom = chartRef.current
    // 图表初始化生成图表实例对象
    var myChart = echarts.init(chartDom)
    // 准备图表参数
    var option

    option = {
      text: {
        title
      },
      xAxis: {
        type: 'category',
        data: ['Vue', 'React', 'Angular']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: [10, 40, 70]
        }
      ]
    };
    option && myChart.setOption(option)
  }, [])
  return <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>
}

export default BarChart